{% extends "base.html" %}

{% import "bootstrap/wtf.html" as wtf %}
{% import "bootstrap/fixes.html" as fixes %}
{% import "bootstrap/utils.html" as util %}

{% block title %}Similarity Network{% endblock %}


{% block styles %}
    {{ super() }}


    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
          integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/graph_explorer.css') }}">

    <style>

        .center-slider {
            margin-bottom: 10px;
            margin-top: 10px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

        #network {
            display: block;
            height: 584px;
            border: 1px solid lightgrey;
            padding-right: 0px !important;;
            padding-left: 0px !important;
            border-radius: 4px !important;
        }

        .param {
            margin-bottom: 1em;
        }

        .full-width {
            width: 100%;
        }

        .not-rounded {
            border-radius: 0 !important;
        }

        .not-rounded2 {
            border-radius: 0 !important;
        }

        p {
            margin: 0.5em 0;
        }

        .param button {
            width: 3em;
            margin-right: 0.25em;
        }

        .slider {
            display: block;
        }

    </style>
{% endblock %}

{% block scripts %}
    {{ super() }}
    {% include "dependencies/common.html" %}
    {% include "dependencies/cytoscape.html" %}
    {% include "dependencies/slider.html" %}
    <script type="text/javascript"
            src="{{ url_for('static', filename='js/graph_controller.js', version='20181602') }}">
    </script>

{% endblock %}

{% block content %}
    <div class="container">

        <div class="text-center">
            <h2>Pathway Similarity Network</h2>
        </div>

        <div class="row">
            <div class="col-lg-8 col-md-8 col-xs-8" id="network"></div>
            <div class="panel panel-default col-lg-4 col-md-4 col-xs-4"
                 style="max-height: 585px;height: 585px;padding-right: 0;padding-left: 0; margin-bottom:0">
                <ul class="nav nav-tabs">
                      <li class="active">
                        <a class="nav-link" data-toggle="tab" href="#network-panel"><i
                                class="fa fa-cog" aria-hidden="true"></i> Modify Network</a>
                    </li>
                    <li>
                        <a class="nav-link" data-toggle="tab" href="#nodes-panel"><i
                                class="far fa-circle" aria-hidden="true"></i>
                            Nodes
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" data-toggle="tab" href="#edges-panel"><i
                                class="fa fa-arrow-right " aria-hidden="true"></i> Edges</a>
                    </li>
                    <li>
                        <a data-toggle="modal" data-target="#legend"><i
                                class="fa fa-map" aria-hidden="true"></i></a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="network-panel" role="tabpanel">
                        <button type="button" id="refresh-network" class="btn btn-primary not-rounded full-width">
                            Refresh Network
                        </button>
                        <p class="panel-body preamble">
                            Please select the pair of Pathway Databases to compare and the minimum threshold of
                            similarity. Then, click on the "Refresh Network" button.
                        </p>
                        <hr>
                        <div id="config" class="config">
                            <form>
                                <div class="form-inline">
                                    <p>Select Pathway Database Pair</p>
                                    <label for="resource-input-1"></label>

                                    <select type="text" class="form-control" id="resource-input-1">
                                        <option value="reactome">Reactome</option>
                                        <option value="kegg">KEGG</option>
                                        <option value="wikipathways" selected>Wikipathways</option>
                                    </select>

                                    <label for="resource-input-2"></label>

                                    <select type="text" class="form-control" id="resource-input-2">
                                        <option value="reactome">Reactome</option>
                                        <option value="kegg">Kegg</option>
                                        <option value="wikipathways" selected>WikiPathways</option>
                                    </select>
                                </div>
                                <div class="form-inline">
                                    <p>Minimum Similarity Threshold</p>

                                    <label for="similarity-range"></label>
                                    <select type="text" class="form-control" id="similarity-range">

                                        <option>10</option>
                                        <option>20</option>
                                        <option>30</option>
                                        <option>40</option>
                                        <option>50</option>
                                        <option>60</option>
                                        <option>70</option>
                                        <option>80</option>
                                        <option selected>90</option>
                                        <option>100</option>
                                    </select>
                                </div>
                            </form>
                            <div class="tab-pane not-rounded" id="highlight-threshold" role="tabpanel">
                                <div class="panel-body">

                                    <p>
                                    <center>
                                        Highlight the edges with a similarity in the range falling on the slider
                                        threshold.
                                    </center>
                                    </p>
                                    <center><input id="threshold-slider" type="text" value="" data-slider-min="0"
                                                   data-slider-max="1"
                                                   data-slider-step="0.01" data-slider-value="[0.0,1]"
                                                   class="col-lg-10"/>
                                    </center>
                                </div>
                            </div>


                            <div class="param">
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane not-rounded" id="nodes-panel" role="tabpanel">
                        <div id="node-slider" class="center-slider"></div>
                        <button class='btn btn-primary not-rounded full-width' id='get-checked-nodes'>Show
                            Selected Nodes
                        </button>
                        <div class="input-group">
                                <span class="input-group-addon not-rounded2" id="sizing-addon"><i
                                        class="fab fa-connectdevelop fa-0.5x"></i></span>
                            <input placeholder="Search nodes" id="node-search"
                                   class="wide form-control not-rounded"
                                   aria-describedby="sizing-addon1" type="text"/>
                        </div>
                        <div class="not-rounded2" id="node-list"
                             style="max-height: 390px;height: 390px; overflow:auto;">
                        </div>
                    </div>
                    <div class="tab-pane not-rounded" id="edges-panel" role="tabpanel">
                        <div id="edge-slider" class="center-slider"></div>

                        <button class='btn btn-primary not-rounded full-width' id='get-checked-edges'>Show
                            Selected Edges
                        </button>
                        <div class="input-group">
                                <span class="input-group-addon not-rounded2" id="sizing-addon"><i
                                        class="fab fa-connectdevelop fa-0.5x"></i></span>
                            <input placeholder="Search edges" id="edge-search"
                                   class="wide form-control not-rounded"
                                   aria-describedby="sizing-addon1" type="text"/>
                        </div>
                        <div id="edge-list" class="not-rounded2"
                             style="max-height: 390px;height: 390px; overflow:auto;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <table id="info-table" class="table table-bordered table-hover"></table>
        </div>
    </div>
    {% include "visualization/dendrogram/legend.html" %}

    {% include "meta/footer.html" %}
{% endblock %}
